<template>
  <div class="app-container">
    <el-row :gutter="12">
      <el-col :span="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>已加入社团的活动提醒</span>
          </div>
          <el-row :gutter="12">
            <el-col :span="12" v-for="club in joinedClubs" :key="club.id" style="margin-bottom:12px;">
              <el-card shadow="hover">
                <div style="display:flex;justify-content:space-between;align-items:center;">
                  <div style="font-size:15px;font-weight:600;">{{ club.name }}</div>
                  <el-popover placement="left" width="420" trigger="hover" @show="loadClubActivities(club)">
                    <div style="margin-bottom:6px;font-weight:600;">社团简介</div>
                    <div style="white-space:pre-line;">{{ club.introduction || '暂无介绍' }}</div>
                    <div style="margin-top:10px;font-weight:600;">往期活动</div>
                    <div v-if="club.activitiesLoading" style="padding:8px 0;">加载活动中...</div>
                    <ul v-else style="padding-left:16px;margin:6px 0;">
                      <li v-for="(act, idx) in club.activities" :key="idx">{{ act.title }}（{{ act.activityTime }}）</li>
                      <li v-if="!club.activities || !club.activities.length">暂无活动</li>
                    </ul>
                    <div slot="reference" style="cursor:pointer;color:#409EFF;">悬浮查看详情</div>
                  </el-popover>
                </div>
                <div style="margin:8px 0;">
                  <el-tag v-for="(t, i) in club.tags" :key="i" type="info" style="margin-right:6px;">{{ t }}</el-tag>
                </div>
                <div style="margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;">
                  <div>活跃度：{{ club.activityScore }}</div>
                </div>
                <el-table :data="club.upcoming" size="mini" v-loading="club.upcomingLoading">
                  <el-table-column label="活动日期" align="center" prop="activityTime" width="120">
                    <template slot-scope="scope">
                      <span>{{ parseTime(scope.row.activityTime, '{y}-{m}-{d}') }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="标题" align="center" prop="title" />
                  <el-table-column label="地点" align="center" prop="location" />
                </el-table>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="12" style="margin-top:16px;">
      <el-col :span="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>可报名社团</span>
          </div>
          <el-row :gutter="12">
            <el-col :span="8" v-for="club in availableClubs" :key="club.id" style="margin-bottom:12px;">
              <el-card shadow="hover">
                <div style="display:flex;justify-content:space-between;align-items:center;">
                  <div style="font-size:15px;font-weight:600;">{{ club.name }}</div>
                  <el-popover placement="left" width="420" trigger="hover" @show="loadClubActivities(club)">
                    <div style="margin-bottom:6px;font-weight:600;">社团简介</div>
                    <div style="white-space:pre-line;">{{ club.introduction || '暂无介绍' }}</div>
                    <div style="margin-top:10px;font-weight:600;">往期活动</div>
                    <div v-if="club.activitiesLoading" style="padding:8px 0;">加载活动中...</div>
                    <ul v-else style="padding-left:16px;margin:6px 0;">
                      <li v-for="(act, idx) in club.activities" :key="idx">{{ act.title }}（{{ act.activityTime }}）</li>
                      <li v-if="!club.activities || !club.activities.length">暂无活动</li>
                    </ul>
                    <div slot="reference" style="cursor:pointer;color:#409EFF;">悬浮查看详情</div>
                  </el-popover>
                </div>
                <div style="margin:8px 0;">
                  <el-tag v-for="(t, i) in club.tags" :key="i" type="info" style="margin-right:6px;">{{ t }}</el-tag>
                </div>
                <div style="display:flex;justify-content:space-between;align-items:center;">
                  <div>活跃度：{{ club.activityScore }}</div>
                  <el-button type="primary" size="mini" @click="goApply(club)">去报名</el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
  </template>
<script>
import { listRelation } from '@/api/club/relation'
import { listInfo } from '@/api/club/info'
import { listActivity } from '@/api/club/activity'
import { getUserProfile } from '@/api/system/user'
export default {
  name: 'UserClubPortal',
  data() {
    return {
      userId: undefined,
      joinedClubs: [],
      availableClubs: [],
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      getUserProfile().then(res => {
        const d = res.data || res
        this.userId = d.userId || d.user?.userId
        this.loadClubs()
      })
    },
    loadClubs() {
      const q = { pageNum: 1, pageSize: 999 }
      listInfo(q).then(res => {
        const rows = res.rows || []
        const all = rows.map(r => ({
          id: r.id,
          name: r.name,
          introduction: r.introduction,
          tags: (r.tags || '').split(',').map(s => s.trim()).filter(Boolean),
          activityScore: r.activityScore,
          activities: [],
          activitiesLoading: false,
          upcoming: [],
          upcomingLoading: false,
        }))
        listRelation({ pageNum: 1, pageSize: 999, userId: this.userId }).then(rr => {
          const joins = (rr.rows || []).map(x => x.clubId)
          this.joinedClubs = all.filter(c => joins.includes(c.id))
          this.availableClubs = all.filter(c => !joins.includes(c.id))
          this.joinedClubs.forEach(c => this.loadUpcoming(c))
        })
      })
    },
    loadUpcoming(club) {
      club.upcomingLoading = true
      listActivity({ pageNum: 1, pageSize: 999, clubId: club.id }).then(res => {
        const rows = res.rows || []
        const now = new Date()
        const upcoming = rows.filter(a => {
          const t = new Date(a.activityTime)
          return t >= now || a.status === 0
        }).sort((a, b) => new Date(a.activityTime) - new Date(b.activityTime)).slice(0, 5)
        club.upcoming = upcoming
        club.upcomingLoading = false
      }).catch(() => { club.upcomingLoading = false })
    },
    loadClubActivities(club) {
      if (club.activitiesLoading || (club.activities && club.activities.length)) return
      club.activitiesLoading = true
      listActivity({ pageNum: 1, pageSize: 5, clubId: club.id }).then(res => {
        const rows = res.rows || []
        club.activities = rows.map(a => ({ title: a.title, activityTime: a.activityTime }))
        club.activitiesLoading = false
      }).catch(() => { club.activitiesLoading = false })
    },
    goApply(club) {
      const url = `http://localhost/c/application?clubId=${club.id}`
      window.open(url, '_self')
    }
  }
}
</script>
<style>
</style>